<div className={styles.cardBox}>

    {/* 顶部 */}
    <div className={styles.cardTop}>
      <div>订单编号: 1076217114660179968</div>
      {
        type && type === '0' ? <div>未付款</div> :
          type === '1' ? <div>已付款，等待发货</div> :
            type === '2' ? <div>已发货</div> :
              type === '3' ? <div>已退单/已收货</div> :
                type === '4' ? <div>等待处理....</div> : null
      }
    </div>

    {/* 中间 */}
    <div className={styles.cardCenter}>
      <div>
        <img className={styles.goodsImg} src={require('@/static/logo.png')} alt="img" />
      </div>
      <div className={styles.goodsInfo}>
        <div className={styles.goodsName}>
          <div>美式球原木led</div>
          <div>¥399</div>
        </div>
        <div>
          <div className={styles.numbering}>
            <span>编号：1626537588171997186</span>
            <span>x 2</span>
          </div>
          <div>
            <span>规格：</span>
          </div>
          <div className={styles.lastSpan}>
            <div>
              <span>颜色 : 1</span>
              <span>大小 : 1</span>
            </div>

          </div>
          {
            type && type === '2' ?
              <div className={styles.returnDiv}>
                <span onClick={returnGoods}>退货</span>
              </div> : null
          }
        </div>
      </div>
    </div>

    {/* 底部 */}
    <div className={styles.cardBottom}>
      <div>时间: 2023-02-17 19:02:35</div>
      <div>合计: ¥24646</div>
    </div>


    {/* 底部操作 */}
    {
      type && type === '0' ?
        <div className={styles.cancelOrder}>
          <div onClick={cancelGoods}>取消订单</div>
          <div onClick={payBtn}>付款</div>
        </div> : type === '2' ?
          <div className={styles.cancelOrder}>
            <div onClick={confirmGoods}>确认收货</div>
          </div> : type === '3' ?
            <div className={styles.delOrder}>
              <div onClick={delGoods}>订单已关闭，删除订单</div>
            </div> : null
    }

  </div>